<template>
  <el-container style="min-height: 100vh">
    <el-aside :width="sideWith+ 'px'"
              style="background-color: rgb(238, 241, 246);box-shadow: 2px 0 6px rgb(0 21 41 /35%)">
      <Aside :isCollapse="isCollapse" :logoTextShow="logoTextShow"></Aside>
    </el-aside>

    <el-container>
      <el-header style="border-bottom: 1px solid #ccc; ">
        <Header :collapseBtnClass = "collapseBtnClass" :collapse="collapse"></Header>
      </el-header>

      <el-main>
<!--        //当前页面的子路由在这个router-view 里面显示-->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>

import {allUserMessage, deleteById, updateUserById,deleteByIds} from '@/api/user';
import Aside from "@/components/Aside.vue";
import Header from "@/components/Header.vue";
export default {
  name: 'HomeView',
  components:{Aside,Header},
  data() {
    return {
      isCollapse: false,
      collapseBtnClass: 'el-icon-s-fold',
      logoTextShow: true,
      sideWith: 200,
    }
  },
  methods:{
    // 点击收缩按钮,触发函数
    collapse() {
      this.isCollapse = !this.isCollapse
      if (this.isCollapse) {
        this.sideWith = 64  //收缩
        this.collapseBtnClass = 'el-icon-s-unfold'
        this.logoTextShow = false
      } else {
        this.sideWith = 200  //展开
        this.collapseBtnClass = 'el-icon-s-fold'
        this.logoTextShow = true
      }
    },
  }

}
</script>
<style scoped="scoped">
.headerBg {
  background: #ccc !important;
}
.parent {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.el-dialog {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 80%;
  max-height: 80vh;
  overflow-y: auto;
}

</style>
